<script setup lang="ts">
import './style.scss'
import '../../style/public.scss'
import {
  ElScrollbar,
  ElDescriptions,
  ElDescriptionsItem,
  ElEmpty,
  ElPagination
} from 'element-plus'
import { Delete, Edit } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { RuleGroupApi, RuleDetailApi, type RuleGroupVO, type RuleDetailVO } from './api'
import RuleTypeEdit from './form.vue'
import RulesForm from './rules-form.vue'
import { filter_rule_level, filter_rule_level_type } from './rules'

const selectRuleType = (item: RuleGroupVO) => {
  queryItem.groupId = item.id
  loadItem()
}
const ruleTypeList = ref<RuleGroupVO[]>([])
const ruleItemList = ref<RuleDetailVO[]>([])
const ruleItemQuery = ref({} as any)
const rulesDetail = ref<any>({} as any)
const queryType = reactive<any>({
  pageNo: 1,
  pageSize: 50,
  name: undefined
})
const queryItem = reactive<any>({
  pageNo: 1,
  pageSize: 50,
  groupId: undefined
})
const ruleTypeTotal = ref(0)
const ruleItemTotal = ref(0)
const loadType = async () => {
  const { list, total } = await RuleGroupApi.getRuleGroupPage(queryType)
  ruleTypeList.value = list
  ruleTypeTotal.value = total
  if (list.length > 0) {
    queryItem.groupId = list[0].id
    await loadItem()
  } else {
    queryItem.groupId = null
  }
}
const loadItem = async () => {
  if (queryItem.groupId) {
    const { list, total } = await RuleDetailApi.getRuleDetailPage(queryItem)
    ruleItemList.value = list
    ruleItemTotal.value = total
    if (list.length > 0) {
      rulesDetail.value = list[0]
    } else {
      rulesDetail.value = null
    }
  }
}
const edit = ref<InstanceType<typeof RuleTypeEdit>>()
const rulesForm = ref<InstanceType<typeof RulesForm>>()
const openAddRule = (data: any) => {
  if (data) {
    rulesForm.value?.open(true, data)
  } else if (queryItem.groupId) {
    rulesForm.value?.open(true, { groupId: queryItem.groupId })
  }
}
const onDelGroup = async (id: any) => {
  await RuleGroupApi.deleteRuleGroup(id)
  if (queryItem.groupId === id) {
    queryItem.groupId = null
  }
  await loadType()
}
const onDelRule = async (id: any) => {
  await RuleDetailApi.deleteRuleDetail(id)
  await loadItem()
}
const selectRuleDetail = (item: RuleDetailVO) => {
  rulesDetail.value = item
}
onMounted(() => {
  loadType()
})
</script>

<template>
  <div class="page">
    <div class="law-rules">
      <div class="rules-box rules-type">
        <div class="rules-box-title">
          <span style="flex: 1; font-weight: 700">规则分组(共{{ ruleTypeTotal }}分组)</span>
          <el-button type="primary" @click="edit?.openForm(true)">新增</el-button>
        </div>
        <div class="rules-box-content">
          <el-scrollbar height="100%">
            <div v-if="ruleTypeList.length">
              <div
                v-for="item in ruleTypeList"
                :key="item.id"
                @click="selectRuleType(item)"
                class="rules-type-content"
                :class="queryItem?.groupId == item.id ? 'active' : ''"
              >
                <div class="rules-type-content-lift">{{ item.name }}</div>
                <el-button link text type="info"
                           @click="edit?.openForm(true,{...item})">
                  编辑
                </el-button>
                <el-popconfirm
                  title="是否确认删除分组?"
                  :disabled="!item?.id"
                  @confirm="onDelGroup(item.id)"
                >
                  <template #reference>
                    <el-button type="danger" link text>删除</el-button>
                  </template>
                </el-popconfirm>
              </div>
            </div>
            <el-empty v-else :image-size="100" />
          </el-scrollbar>
        </div>
        <div style="width: 50%; height: 50px; display: flex; align-items: center">
          <el-pagination
            layout="prev, pager, next"
            :total="ruleTypeTotal || 0"
            @change="loadType()"
            v-model:current-page="queryType.pageNo"
            v-model:page-size="queryType.pageSize"
          />
        </div>
        <RuleTypeEdit ref="edit" @ok="loadType" />
      </div>
      <div class="rules-box rules-item">
        <div class="rules-box-title">
          <span style="flex: 1; font-weight: 700">文件规则 (共{{ ruleItemTotal }}条规则)</span>
          <el-button
            type="primary"
            :disabled="queryItem?.groupId == undefined"
            @click="openAddRule(null)"
            >新增规则</el-button
          >
        </div>
        <div class="rules-box-content">
          <el-scrollbar height="100%">
            <div v-if="ruleItemList.length">
              <div
                v-for="item in ruleItemList"
                :key="item.id"
                @click="selectRuleDetail(item)"
                class="rules-type-content"
                :class="{ active: rulesDetail?.id == item.id }"
              >
                <div class="rules-type-content-lift">
                  <el-tag :type="filter_rule_level_type(item.level)">{{
                    filter_rule_level(item.level)
                  }}</el-tag>
                  <span class="rules-type-content-lift-name">{{ item.name }}</span>
                </div>
                <el-popconfirm
                  title="是否确认删除规则?"
                  :disabled="!rulesDetail?.id"
                  @confirm="onDelRule(item.id)"
                  @click.stop
                >
                  <template #reference>
                    <el-button type="danger" link text>删除</el-button>
                  </template>
                </el-popconfirm>
              </div>
            </div>
            <el-empty v-else :image-size="100" />
          </el-scrollbar>
        </div>
        <div style="width: 50%; height: 50px; display: flex; align-items: center">
          <el-pagination
            layout="prev, pager, next"
            :total="ruleItemTotal || 0"
            @change="loadItem()"
            v-model:current-page="queryItem.pageNo"
            v-model:page-size="queryItem.pageSize"
          />
        </div>
        <RulesForm ref="rulesForm" :groupList="ruleTypeList" @ok="loadItem" />
      </div>
      <div class="rules-box rules-info">
        <div class="rules-box-title">
          <span style="flex: 1; font-weight: 700">规则详情</span>
          <div v-if="rulesDetail?.id">
            <el-button
              type="primary"
              text
              :disabled="!rulesDetail?.id"
              @click="openAddRule(rulesDetail)"
              ><el-icon class="el-icon--right"><Edit /></el-icon
            ></el-button>
            <el-popconfirm
              title="是否确认删除规则?"
              :disabled="!rulesDetail?.id"
              @confirm="onDelRule(rulesDetail.id)"
            >
              <template #reference>
                <el-button style="padding: 0" type="danger" text
                  ><el-icon class="el-icon--left"><Delete /></el-icon
                ></el-button>
              </template>
            </el-popconfirm>
          </div>
        </div>
        <div v-if="rulesDetail?.id" class="rules-box-content">
          <div class="rules-info-content">
            <el-descriptions
              title=""
              class="rules-info-content-inner"
              direction="vertical"
              :column="1"
              :border="false"
            >
              <el-descriptions-item align="left" label="规则名称">
                {{ rulesDetail.name }}
              </el-descriptions-item>
              <el-descriptions-item align="left" label="危险等级">
                <el-tag :type="filter_rule_level_type(rulesDetail.level)">{{
                  filter_rule_level(rulesDetail.level)
                }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item align="left" label="规则详情">
                {{ rulesDetail.description }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
        <el-empty v-else :image-size="100" />
      </div>
    </div>
  </div>
</template>
